<template>
  <div class="main-todo">
    <input type="text" class="add" v-model='inputval' placeholder="what to do?" autofocus @keyup.enter="add">
    <div v-for="(item, i) in listinfo" :key="i" class="item">
      <input type="checkbox" v-model="item.done" @change="(e) => {cbchange(e, item.id)}">
      <label>{{item.info}}</label>
      <a href="#" @click="remove(item.id)">x</a>
    </div>
    <footer>
      <span>{{unDoneLength}} items left</span>
      <span>
        <button @click="show('all')" :class="viewkey == 'all' ? 'selected' : ''">All</button>
        <button @click="show(' ')" :class="viewkey == ' ' ? 'selected' : ''">Active</button>
        <button @click="show('done')" :class="viewkey == 'done' ? 'selected' : ''">Completed</button>
      </span>
      <button class="clear" @click="cleardone">Clear Completed</button>
    </footer>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'MainTodo',
  computed: {
    ...mapState(['viewkey']),
    ...mapGetters(['listinfo', 'unDoneLength']),
    inputval: {
      get () {
        return this.$store.state.inputval
      },
      set (newvalue) {
        this.$store.state.inputval = newvalue
      }
    }
  },
  methods: {
    add () {
      if (this.inputval.trim() === '') return
      this.$store.commit('additem')
    },
    remove (id) {
      this.$store.commit('removeitem', id)
    },
    cbchange (e, id) {
      const params = {
        id: id,
        status: e.target.checked
      }
      this.$store.commit('changeitem', params)
    },
    show (status) {
      this.$store.commit('showitem', status)
    },
    cleardone () {
      this.$store.commit('cleardnoe')
    }
  }
}
</script>

<style lang="less" scoped>
.main-todo {
  width: 600px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #fff;
  box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
}
.add {
  font-size: 24px;
  padding: 16px;
  font-family: inherit;
  font-weight: inherit;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  height: 50px;
  font-size: 20px;
  padding: 0 10px;
  font-family: inherit;
  font-weight: inherit;
  width: 100%;
}
.item label {
  margin-left: 10px;
  flex: 1;
}
.item input {
  display: block;
  height: 20px;
  width: 20px;
  cursor: pointer;
}
.item a {
  color: #fc9d9a;
  font-size: 30px;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  padding: 10px;
  font-size: 16px;
}
footer span:nth-child(1) {
  color: #fc9d9a;
  font-weight: 400;
}
footer span:nth-child(2) {
  margin-left: 20px;
  flex: 1;
}
.clear {
  color: #fff;
  background-color: #80a99a;
}
.selected {
  color: #fff;
  background-color: #fe4365;
}
</style>